<template>
  <div class="edit-item " :class="wrap?'edit-item-wrap':''">
    <div class="edit-title">
      <template v-if="title">{{title}}
        <el-tooltip v-if="$attrs.content" placement="top"  class="tip" v-bind="$attrs" >
          <div :class="icon" :style="{fontSize:iconSize+'px',color:iconColor}" ></div>
        </el-tooltip>
        ：
      </template>
    </div>
    <div class="edit-cont">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditItem",
  props: {
    wrap: { // 是否换行
      type: Boolean,
      default: false
    },
    title: {
      type: [String, Number],
      default: ""
    },
    icon: {
      type: String,
      default: "mallfont mall-wenhao"
    },
    iconSize: {
      type: String,
      default: "17"
    },
    iconColor: {
      type: String,
      default: "#909090"
    }

  }
}
</script>

<style lang="scss" scoped>

  //编辑区样式
  .edit-item {
    width: 100%;
    margin-bottom: 15px;
    display: flex;

    .edit-title {
      height: 30px;
      line-height: 30px;
      margin-right: 6px;
      font-size: 14px;
      color: #353535;

      .tip {
        display: inline-block;
        font-size: 17px;
        cursor: pointer;
        vertical-align: middle;
      }
    }

    .edit-cont {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      overflow: hidden;
    }
    &::v-deep{
      .edit-item{
        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .edit-item-wrap {
    display: block;
  }

</style>
